<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Switcher3 - 多项目环境配置管理</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <!-- 主容器 -->
  <div class="container">
    <!-- 页面头部 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="title">
            <i class="fas fa-exchange-alt"></i>
            Switcher3
          </h1>
          <p class="subtitle">多项目环境配置管理</p>
        </div>
        <div class="header-right">
          <div class="stats-summary" id="statsSummary">
            <div class="stat-item">
              <span class="stat-value" id="totalProjects">0</span>
              <span class="stat-label">项目</span>
            </div>
            <div class="stat-item">
              <span class="stat-value" id="activeProjects">0</span>
              <span class="stat-label">激活</span>
            </div>
          </div>
          <button class="btn btn-secondary" id="refreshBtn" title="刷新数据">
            <i class="fas fa-sync-alt"></i>
          </button>
        </div>
      </div>
    </header>

    <!-- 全局操作栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <button class="btn btn-primary" id="addProjectBtn">
          <i class="fas fa-plus"></i>
          添加项目
        </button>
      </div>
      <div class="toolbar-right">
        <button class="btn btn-outline" id="deactivateAllBtn" title="停用所有环境">
          <i class="fas fa-power-off"></i>
          全部停用
        </button>
        <button class="btn btn-outline" id="viewRulesBtn" title="查看当前规则">
          <i class="fas fa-list"></i>
          查看规则
        </button>
      </div>
    </div>

    <!-- 项目列表 -->
    <main class="main-content">
      <div class="projects-container">
        <!-- 项目列表标题 -->
        <div class="section-header">
          <h2 class="section-title">项目列表</h2>
          <div class="section-actions">
            <select class="select-input" id="sortSelect">
              <option value="name">按名称排序</option>
              <option value="updated">按更新时间</option>
              <option value="status">按状态排序</option>
            </select>
          </div>
        </div>

        <!-- 项目列表容器 -->
        <div class="projects-list" id="projectsList">
          <!-- 加载中状态 -->
          <div class="loading-state" id="loadingState">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载项目列表...</span>
          </div>

          <!-- 空状态 -->
          <div class="empty-state" id="emptyState" style="display: none;">
            <i class="fas fa-folder-open"></i>
            <h3>暂无项目</h3>
            <p>点击"添加项目"按钮创建你的第一个项目</p>
            <button class="btn btn-primary" onclick="document.getElementById('addProjectBtn').click()">
              <i class="fas fa-plus"></i>
              添加项目
            </button>
          </div>

          <!-- 项目卡片容器（动态生成） -->
          <div class="projects-grid" id="projectsGrid">
            <!-- 项目卡片模板将在这里动态插入 -->
          </div>
        </div>
      </div>
    </main>


  </div>

  <!-- 模态对话框 -->
  <!-- 添加项目对话框 -->
  <div class="modal" id="addProjectModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">添加新项目</h3>
        <button class="modal-close" onclick="closeModal('addProjectModal')">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="addProjectForm">
          <div class="form-group">
            <label class="form-label" for="projectName">项目名称</label>
            <input type="text" class="form-input" id="projectName" placeholder="请输入项目名称" required>
            <small class="form-help">项目名称应该简洁明了，便于识别</small>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('addProjectModal')">取消</button>
        <button class="btn btn-primary" id="confirmAddProject">确定</button>
      </div>
    </div>
  </div>

  <!-- 重命名项目对话框 -->
  <div class="modal" id="renameProjectModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">重命名项目</h3>
        <button class="modal-close" onclick="closeModal('renameProjectModal')">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="renameProjectForm">
          <div class="form-group">
            <label class="form-label" for="newProjectName">新项目名称</label>
            <input type="text" class="form-input" id="newProjectName" placeholder="请输入新的项目名称" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('renameProjectModal')">取消</button>
        <button class="btn btn-primary" id="confirmRenameProject">确定</button>
      </div>
    </div>
  </div>

  <!-- 删除确认对话框 -->
  <div class="modal" id="deleteConfirmModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">确认删除</h3>
        <button class="modal-close" onclick="closeModal('deleteConfirmModal')">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="confirm-message">
          <i class="fas fa-exclamation-triangle warning-icon"></i>
          <p>确定要删除项目 "<span id="deleteProjectName"></span>" 吗？</p>
          <p class="warning-text">此操作不可撤销，项目的所有配置将被永久删除。</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('deleteConfirmModal')">取消</button>
        <button class="btn btn-danger" id="confirmDeleteProject">删除</button>
      </div>
    </div>
  </div>

  <!-- 查看规则对话框 -->
  <div class="modal large" id="viewRulesModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">当前激活的规则</h3>
        <button class="modal-close" onclick="closeModal('viewRulesModal')">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="rules-container" id="rulesContainer">
          <!-- 规则内容将在这里动态加载 -->
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('viewRulesModal')">关闭</button>
      </div>
    </div>
  </div>

  <!-- 消息提示 -->
  <div class="toast" id="toast">
    <div class="toast-content">
      <i class="toast-icon"></i>
      <span class="toast-message"></span>
    </div>
  </div>

  <!-- JavaScript -->
  <script src="api.js"></script>
  <script src="utils.js"></script>
  <script src="main.js"></script>
</body>
</html>